<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--帖子列表</TITLE>

<Link rel="stylesheet" type="text/css" href="style/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/bbs.js"></script>
</HEAD>

<BODY>
<div id="app">
<!--	<bbs>-->
		<!--      主体        -->
		<DIV>
			<!--      导航        -->
			<br/>
			<DIV>
				&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
				<B><a href="list.html">灌水乐园</a></B>
			</DIV>
			<br/>
			<!--      新帖        -->
			<DIV>
				<A href="post.html"><IMG src="image/post.gif" name="td_post" border="0" id=td_post></A>
			</DIV>
			<!--         翻 页         -->
			<DIV style="text-align: right">
				<el-pagination
						background
						layout="prev, pager, next"
						:total="page.total"
						:page-size="page.rows"
						@current-change="changQuery"
						:current-page.sync="page.page">
				</el-pagination>
			</DIV>

			<DIV class="t">
				<TABLE cellSpacing="0" cellPadding="0" width="100%">
					<TR>
						<TH class="h" style="WIDTH: 100%" colSpan="4"><SPAN>&nbsp;</SPAN></TH>
					</TR>
					<!--       表 头           -->
					<TR class="tr2">
						<TD>&nbsp;</TD>
						<TD style="WIDTH: 80%" align="center">文章</TD>
						<TD style="WIDTH: 10%" align="center">作者</TD>
						<TD style="WIDTH: 10%" align="center">回复</TD>
					</TR>
					<!--         主 题 列 表        -->

					<TR class="tr3" v-for="t in list">
						<TD><IMG src="image/topic.gif" border=0></TD>
						<TD style="FONT-SIZE: 15px">
							<A :href="'detail.html?id=' + t.id">{{t.title}}</A>
						</TD>
						<TD align="center">{{t.user.cname}}</TD>
						<TD align="center">{{t.replyCnt}}</TD>
					</TR>


				</TABLE>
			</DIV>
			<!--            翻 页          -->
			<DIV style="text-align: right">
				<el-pagination
						background
						layout="prev, pager, next"
						:total="page.total"
						:page-size="page.rows"
						@current-change="changQuery"
						:current-page.sync="page.page">
				</el-pagination>
			</DIV>
		</DIV>
<!--	</bbs>-->
</div>
</BODY>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			page:{page:1, rows:8, total:0},
			list:[]
		},
		created() {
			this.query();
		},
		methods : {
			query(){
				axios.get("topic/queryByBid" + location.search, {
					params : this.page
				}).then(res=> {
					this.list = res.data.records
					this.page.total = res.data.total;
				})
			},
			changQuery(pageNum){
				this.page.page = pageNum
				this.query()
			}
		}
	})
</script>
</HTML>
